<template>
  <div class="contain">
    <!-- 信息公开目录模块 -->
    <div class="model">
      <div class="title">
        <div class="tip">
          <span>{{ title }}</span>
        </div>
      </div>
      <el-row class="el_row">
        <el-col :span="8" class="el_col">
          <router-link to="eduWorkAction">
            <div class="items">
              <i class="el-icon-document"></i>
              <span class="title">工作动态</span>
            </div>
          </router-link>
        </el-col>
        <el-col :span="8" class="el_col">
          <router-link to="">
            <div class="items">
              <i class="el-icon-chat-line-round"></i>
              <span class="title">通知公告</span>
            </div>
          </router-link>
        </el-col>
        <el-col :span="8" class="el_col">
          <router-link to="">
            <div class="items">
              <i class="el-icon-notebook-2"></i>
              <span class="title">招生考试信息</span>
            </div>
          </router-link>
        </el-col>
        <el-col :span="12" class="el_col">
          <router-link to="">
            <div class="items">
              <i class="el-icon-copy-document"></i>
              <span class="title">双公示</span>
            </div>
          </router-link>
        </el-col>
        <el-col :span="12" class="el_col">
          <router-link to="">
            <div class="items">
              <i class="el-icon-download"></i>
              <span class="title">资料下载</span>
            </div>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => ""
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.contain {
  .model {
    > .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .tip {
        width: 225px;
        height: 61px;
        background-image: url("../../../assets/images/jkq/tipTitle.svg");
        background-size: cover;
        background-repeat: no-repeat;
        color: #ffffff;
        font-size: 22px;
        span {
          width: 220px;
          height: 53px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .el_row {
      height: 327px;
      border: 1px solid #ededed;
      .el_col {
        height: 50%;
        &:nth-child(1),
        &:nth-child(2) {
          border-right: 1px solid #ededed;
          border-bottom: 1px solid #ededed;
        }
        &:nth-child(3) {
          border-bottom: 1px solid #ededed;
        }
        &:nth-child(4) {
          border-right: 1px solid #ededed;
        }
        a {
          display: flex;
          height: 100%;
          justify-content: center;
          align-items: center;
          transition: 0.3s;
          &:hover {
            background-color: $font-color;
            box-shadow: 0 0 15px $font-color;
            .items {
              color: #fff;
              i {
                color: inherit;
              }
            }
          }
          .items {
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            text-align: center;
            i {
              font-size: 42px;
              color: #a3a3a3;
              margin-bottom: 26px;
            }
            span {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}
</style>
